<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/EN/html4/strict.dtd"> 
<html>
<head>
    <title>aun_color web</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<script type="text/javascript">
</script>
    <script type="text/javascript" src="js/color-converter.js"></script>
<!--    <script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script> -->
    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<!--
    <script type="text/javascript" src="js/thickbox.js"></script>
    <script type="text/javascript" src="js/jquery.longclick-min.js"></script>
-->
    <script type="text/javascript" src="js/jquery.tap-1.0.3.js"></script>
<!--    <script type="text/javascript" src="js/jquery.tappable.js"></script> -->
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/color-table.js"></script>
    <script type="text/javascript" src="js/aun_color.js"></script>

    <link href="./css/aun_color.css" media="screen" rel="stylesheet" type="text/css" /> 
    <link href="./css/thickbox.css" media="screen" rel="stylesheet" type="text/css" /> 
    <link href="css/ui-lightness/jquery-ui-1.8.13.custom.css" media="screen" rel="stylesheet" type="text/css" />
    <meta name="viewport" content="width=device-width" />
</head>
<body>
  <div id="container">
    <div id="header">
      <h1 id="title">aun_color  web</h1>
      <div id="created-by">by <a href="http://www.auncolor.com/">@aun_color</a></div>
    </div>
    <table id="layout-table">
      <tbody>
	<tr>
	  <td colspan="2">
	    <table id="c-sample">
	      <tr>
		<td rowspan="3" id="current-color"></td>
		<td class="c-value" id="rgb16"></td>
		<td class="c-value" id="rgb10"></td>
	      </tr>
	      <tr>
		<td class="c-value" id="mancel"></td>
		<td class="c-value" id="cmyk"></td>
	      </tr>
	      <tr>
		<td colspan="2" class="c-value" id="excel-no"></td>
	      </tr>
	    </table>
	  </td>
	</tr>
	<tr>
	  <td id="nav-container">
	    <div id="nav-bar">
	      <img id="sun"  class="nav-button" src="imgs/nav-sun.png"  onclick="change2sun();"/>
	      <img id="back" class="nav-button" src="imgs/nav-back.png" onclick="getBack();" />
	      <img id="moon" class="nav-button" src="imgs/nav-moon.png" onclick="change2moon();"/>
	    </div>
	  </td>
	  <td id="sm-container" rowspan="2">
	    <div id="matrix" >
	      <table id="sheetmap">
		<tbody>
		  <tr>
		    <td id="cmα" class="map-cell" style="padding: 5px;" colspan="2" style="text-align: left;" onClick="changeCM('α');">ホームボタン</td>
		    <td id="cmTheta" class="map-cell" style="padding: 5px;" colspan="2" style="text-align: left;" onClick="loadTheta();">オフホワイト</td>
		  </tr>
		  <tr>
		    <td colspan="4"><div id="split-line" ></div></td>
		  </tr>
		  <tr>
		    <td id="cmβ" class="map-cell" onClick="changeCM('β');">
		      <div class="cell-note">V 3<br />C -3</div>
		    </td>
		    <td id="cmA" class="map-cell" onClick="changeCM('A');">
		      <div class="cell-note">V 3<br />C -2</div></td>
		    <td id="cmB" class="map-cell" onClick="changeCM('B');">
		      <div class="cell-note">V 3<br />C -1</div></td>
		    <td id="cmC" class="map-cell" onClick="changeCM('C');">
		      <div class="cell-note">V 3<br />C 0</div></td>
		  </tr>
		  <tr>
		    <td id="cmD" class="map-cell" onClick="changeCM('D');">
		      <div class="cell-note">V 2<br />C -3</div></td>
		    <td id="cmE" class="map-cell" onClick="changeCM('E');">
		      <div class="cell-note">V 2<br />C 2</div></td>
		    <td id="cmF" class="map-cell" onClick="changeCM('F');">
		      <div class="cell-note">V 2<br />C -1</div></td>
		    <td id="cmG" class="map-cell" onClick="changeCM('G');">
		      <div class="cell-note">V 2<br />C 0</div></td>
		    
		  </tr>
		  <tr>
		    <td id="cmH" class="map-cell" onClick="changeCM('H');">
		      <div class="cell-note">V 1<br />C -3</div></td>
		    <td id="cmI" class="map-cell" onClick="changeCM('I');">
		      <div class="cell-note">V 1<br />C -2</div></td>
		    <td id="cmJ" class="map-cell" onClick="changeCM('J');">
		      <div class="cell-note">V 1<br />C -1</div></td>
		    <td id="cmK" class="map-cell" onClick="changeCM('K');">
		      <div class="cell-note">V 1<br />C 0</div></td>
		  </tr>
		  <tr>
		    <td id="cmL" class="map-cell" onClick="changeCM('L');">
		      <div class="cell-note">V 0<br />C -3</div></td>
		    <td id="cmM" class="map-cell" onClick="changeCM('M');">
		      <div class="cell-note">V 0<br />C -2</div></td>
		    <td id="cmN" class="map-cell" onClick="changeCM('N');">
		      <div class="cell-note">V 0<br />C -1</div></td>
		    
		    <td id="cmα"
			class="map-cell" onClick="changeCM('α');">
		      <!--<div class="cell-note"> -->
		      <img src="imgs/home.png" style="margin-top: 3px;"/><!-- V 0<br />C-0</div>-->
		    </td> 
		    
		  </tr>
		  <tr>
		    <td id="cmO" class="map-cell" onClick="changeCM('O');">
		      <div class="cell-note">V -1<br />C -3</div></td>
		    <td id="cmP" class="map-cell" onClick="changeCM('P');">
		      <div class="cell-note">V -1<br />C -2</div>
		    </td>
		    <td id="cmQ" class="map-cell" onClick="changeCM('Q');">
		      <div class="cell-note">V -1<br />C -1</div></td>
		    <td id="cmR" class="map-cell" onClick="changeCM('R');">
		      <div class="cell-note">V -1<br />C 0</div></td>
		  </tr>
		  <tr>
		    <td id="cmS" class="map-cell" onClick="changeCM('S');">
		      <div class="cell-note">V -2<br />C -3</div></td>
		    <td id="cmT" class="map-cell" onClick="changeCM('T');">
		      <div class="cell-note">V -2<br />C -2</div></td>
		    <td id="cmU" class="map-cell" onClick="changeCM('U');">
		      <div class="cell-note">V -2<br />C -1</div></td>
		    <td id="cmV" class="map-cell" onClick="changeCM('V');">
		      <div class="cell-note">V -2<br />C 0</div></td>
		  </tr>
		  <tr>
		    <td id="cmW" class="map-cell" onClick="changeCM('W');">
		      <div class="cell-note">V -3<br />C -3</div></td>
		    <td id="cmX" class="map-cell" onClick="changeCM('X');">
		      <div class="cell-note">V -3<br />C -2</div></td>
		    <td id="cmY" class="map-cell" onClick="changeCM('Y');">
		      <div class="cell-note">V -3<br />C -1</div></td>
		    <td id="cmZ" class="map-cell" onClick="changeCM('Z');">
		      <div class="cell-note">V -3<br />C 0</div></td>
		  </tr>
		  <tr>
		    <td colspan="4">
		      ※Vは明度、Cは彩度
		      <div id="menu-list">
			<ul>
			  <li><a href="sub-htmls/concept.html?KeepThis=true&TB_iframe=true&height=700&width=800" class="thickbox">コンセプト</a></li>
			  <li><a href="sub-htmls/guide.html?KeepThis=true&TB_iframe=true&height=700&width=800" class="thickbox">コーディネートガイド</a></li>
			  <li><a href="sub-htmls/operation-guide.html?KeepThis=true&TB_iframe=true&height=700&width=800" class="thickbox">操作ガイド</a></li>
			  <li><a href="sub-htmls/follow-up.html?KeepThis=true&TB_iframe=true&height=700&width=800" class="thickbox">フォローアップ</a></li>
			  <li><a href="datas-n-utils/aun_color-data.xls">エクセル色データー</a></li>
			</ul>
		      </div>
		    </td>
		  </tr>
		</tbody>
	      </table>
	    </div>
	  </td>
	</tr>
	<tr>
	  <td id="matrix-container">
	    <table id="matrix-table"  onDragStart="dragStartCt(event);" onDragEnd="dragEndCt(event);">
	      <tbody>
		<tr>
		  <td class="color-cell-all color-cell sun" id="c1"></td>
		  <td class="color-cell-all color-cell sun" id="c2"></td>
		  <td class="color-cell-all color-cell sun" id="c3"></td>
		  <td class="color-cell-all color-cell sun moon cell-center" id="c4"></td>
		  <td class="color-cell-all color-cell moon" id="c5"></td>
		  <td class="color-cell-all color-cell moon" id="c6"></td>
		  <td class="color-cell-all color-cell moon" id="c7"></td>
		</tr>
		<tr>
		  <td class="color-cell-all color-cell sun" id="c8"></td>
		  <td class="color-cell-all color-cell sun" id="c9"></td>
		  <td class="color-cell-all color-cell sun" id="c10"></td>
		  <td class="color-cell-all color-cell sun moon cell-center" id="c11"></td>
		  <td class="color-cell-all color-cell moon"></td>
		  <td class="color-cell-all color-cell moon"></td>
		  <td class="color-cell-all color-cell moon"></td>
		</tr>
		<tr>
		  <td class="color-cell-all color-cell sun" id="c12"></td>
		  <td class="color-cell-all color-cell sun" id="c13"></td>
		  <td class="color-cell-all color-cell sun" id="c14"></td>
		  <td class="color-cell-all color-cell sun moon cell-center" id="c15"></td>
		  <td class="color-cell-all color-cell moon" id="c16"></td>
		  <td class="color-cell-all color-cell moon" id="c17"></td>
		  <td class="color-cell-all color-cell moon" id="c18"></td>
		</tr>
		<tr>
		  <td class="color-cell-all color-cell sun"></td>
		  <td class="color-cell-all color-cell sun"></td>
		  <td class="color-cell-all color-cell sun"></td>
		  <td class="color-cell-all color-cell sun moon cell-center" id="c19"></td>
		  <td class="color-cell-all color-cell moon" id="c20"></td>
		  <td class="color-cell-all color-cell moon" id="c21"></td>
		  <td class="color-cell-all color-cell moon" id="c22"></td>
		</tr>
		<tr>
		  <td class="color-cell-all color-cell sun"></td>
		  <td class="color-cell-all color-cell sun"></td>
		  <td class="color-cell-all color-cell sun"></td>
		  <td class="color-cell-all color-cell sun moon cell-center" id="c23"></td>
		  <td class="color-cell-all color-cell moon" id="c24"></td>
		  <td class="color-cell-all color-cell moon" id="c25"></td>
		  <td class="color-cell-all color-cell moon" id="c26"></td>
		</tr>
		<tr>
		  <td class="color-cell-all color-cell sun" id="c27"></td>
		  <td class="color-cell-all color-cell sun" id="c28"></td>
		  <td class="color-cell-all color-cell sun" id="c29"></td>
		  <td class="color-cell-all color-cell sun moon cell-center" id="c30"></td>
		  <td class="color-cell-all color-cell moon" id="c31"></td>
		  <td class="color-cell-all color-cell moon" id="c32"></td>
		  <td class="color-cell-all color-cell moon" id="c33"></td>
		</tr>
		<tr>
		  <td class="color-cell-all color-cell sun" id="c34"></td>
		  <td class="color-cell-all color-cell sun" id="c35"></td>
		  <td class="color-cell-all color-cell sun" id="c36"></td>
		  <td class="color-cell-all color-cell sun moon cell-center" id="c37"></td>
		  <td class="color-cell-all color-cell moon" id="c38"></td>
		  <td class="color-cell-all color-cell moon" id="c39"></td>
		  <td class="color-cell-all color-cell moon" id="c40"></td>
		</tr>
		<tr>
		  <td class="color-cell-all color-cell sun" id="c41"></td>
		  <td class="color-cell-all color-cell sun" id="c42"></td>
		  <td class="color-cell-all color-cell sun" id="c43"></td>
		  <td class="color-cell-all color-cell sun moon cell-center" id="c44"></td>
		  <td class="color-cell-all color-cell moon"></td>
		  <td class="color-cell-all color-cell moon"></td>
		  <td class="color-cell-all color-cell moon"></td>
		</tr>
	      </tbody>
	    </table>
	  </td>
	</tr>
	<tr>
	  <td colspan="2" style="text-align: left; padding-top: 10px;">
	    <div id="op-bar">
	      <img id="op-home"  class="op-button" src="imgs/op-home.png" onClick="changeCM('α');"/>
	      <a href="sub-htmls/help.html?KeepThis=true&TB_iframe=true&height=700&width=800" class="thickbox"><img id="op-help"  class="op-button" src="imgs/op-help.png"/></a>
	      <img id="op-save"  class="op-button" src="imgs/op-save.png"/>
	      <img id="op-load"  class="op-button" src="imgs/op-load.png"/>
	    </div>
	    <div id="pallet-container">
	      <div id="pallet">
		<div id="p1" class="pallet-cell">1</div>
		<div id="p2" class="pallet-cell">2</div>
		<div id="p3" class="pallet-cell">3</div>
		<div id="p4" class="pallet-cell">4</div>
		<div id="p5" class="pallet-cell">5</div>
<!--
		<div id="p1" class="pallet-cell" onclick="putPallet(this);">1</div>
		<div id="p2" class="pallet-cell" onclick="putPallet(this);">2</div>
		<div id="p3" class="pallet-cell" onclick="putPallet(this);">3</div>
		<div id="p4" class="pallet-cell" onclick="putPallet(this);">4</div>
		<div id="p5" class="pallet-cell" onclick="putPallet(this);">5</div>
-->
	      </div>
	    </div>
	    <div id="loadForm" style="display:none;" title="下の欄に保存した文字列をコピーしてください。">
	      <textarea id="loadJson" cols="30" rows="8"></textarea><br>
	      <input id="doLoad" type="button" value="読み込む">
	    </div>
	    
	  </td>
	</tr>
    </table>
    
    <div style="clear:both"></div>
    <div id="footer">
      &copy; 
      <script  type="text/javascript">
	document.write(new Date().getFullYear());
      </script>
      
      aun_color All Rights Reserved.
    </div>
  </div>
</body>
<div id="jsonStr" style="display:none;" title="下の文字列をコピーして保存してください。"><textarea></textarea></div>

</html>
